<template>
  <van-cell-group @click.native="toshop(ids)" >
    <div class="l">
      <img :src="arr.image_path | join" alt="" />
    </div>
    <div class="r">
      <div class="title">
        <div class="left">
          <van-tag type="warning">品牌</van-tag>
          <span class="titles">{{ arr.name }}</span>
        </div>
        <div class="right">
          <span
            v-for="item in arr.supports"
            :key="item.id"
            class="fonts"
            v-text="item.icon_name"
            :style="{ color: '#' + item.icon_color }"
          ></span>
        </div>
      </div>
      <div class="desc">
        <div class="left">
          <van-rate
            v-model="arr.rating"
            :size="12"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
          <span class="ping">{{ arr.rating }}</span>
        </div>
        <div class="right">
          <van-tag
            type="primary"
            v-if="arr.delivery_mode && arr.delivery_mode.is_solid"
            >蜂鸟专送</van-tag
          >
          <van-tag plain type="primary">准时达</van-tag>
        </div>
      </div>
      <div class="price">
        <div class="left">
          <span class="ping"
            >￥<b>{{ arr.float_minimum_order_amount }}</b
            >起送/<b>{{ arr.piecewise_agent_fee.tips }}</b></span
          >
        </div>
        <div class="right">
          <span class="required_time">
            <b>{{ arr.distance }}</b
            >/<b>{{ arr.order_lead_time }}</b>
          </span>
        </div>
      </div>
    </div>
  </van-cell-group>
</template>

<script>
export default {
  props: ["arr", "geohash","ids"],
  filters: {
    join(val) {
      return "https://elm.cangdu.org/img/" + val;
    },
  },
  methods: {
    toshop(id) {
      this.$router.push({
        path: "/shopList/goods-detail",
        query: {
          restaurant_id:id,
          geohash: this.geohash,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.van-cell-group {
  display: flex;
  height: 100px;
  padding: 10px;
  .l {
    flex: 1;
    background-color: #ddd;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .r {
    margin-left: 10px;
    flex: 3;
    position: relative;
    // background-color: red;
    padding-left: 5px;
    padding-top: 5px;
    /deep/ .left {
      float: left;
    }
    /deep/ .right {
      float: right;
    }
    .title {
      height: 10px;
      .titles {
        // margin-left: 5px;
        // margin-top: 5px;
        position: absolute;
        top: 1px;
        left: 40px;
        width: 150px;
        height: 21px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 18px;
      }
      .fonts {
        display: inline-block;
        width: 20px;
        height: 20px;
        color: #000;
      }
    }

    .desc {
      height: 10px;
      margin-top: 25px;
      margin-bottom: 25px;
    }
    .price {
      font-size: 12px;
    }
  }
}
</style>